const path = require("path");
const resolve = (dir) => path.resolve(__dirname, dir);
//ts配置引入
const merge = require("webpack-merge");
const tsImportPluginFactory = require("ts-import-plugin");

module.exports = {
  // 构建输出目录
  outputDir: "dist",
  //静态资源目录
  assetsDir: "static",
  publicPath: "/",
  parallel: false,
  //保存时使用'eslint-loader'进行检查

  lintOnSave: true,
  chainWebpack: (config) => {
    //ts配置
    config.module
      .rule("ts")
      .use("ts-loader")
      .tap((options) => {
        options = merge(options, {
          transpileOnly: true,
          getCustomTransformers: () => ({
            before: [
              tsImportPluginFactory({
                libraryName: "vant",
                libraryDirectory: "es",
                style: (name) => `${name}/style/less`,
              }),
            ],
          }),
          compilerOptions: {
            module: "es2015",
          },
        });
        return options;
      });
    // 添加别名
    config.resolve.alias
      .set("@", resolve("src"))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("router", resolve("src/router"))
      .set("store", resolve("src/store"))
      .set("views", resolve("src/views"));
    config.plugin("copy").tap((args) => {
      args[0][0].to = "resource";
      return args;
    });
  },
  //服务相关
  devServer: {
    open: true,
    port: 1880,
  },
  //css配置
  css: {
    // 当为true时，css文件名可省略 module 默认为 false
    modules: false,
    // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
    // 默认生产环境下是 true，开发环境下是 false
    extract: false,
    // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
    sourceMap: false,
    //要打开,不然vant的样式库会失效
    requireModuleExtension: true,
    loaderOptions: {
      less: {
        // less-loader@5 不要 lessOptions 这层

        modifyVars: {
          hack: `true; @import "${path.join(
            __dirname,
            "./src/assets/styles/theme.less"
          )}";`,
        },
      },
    },
  },
};
